<template>
	<view class="order">
		<view class="time">
			<view class="date" @tap="show=true">
				<u--input v-model="params.keywords"></u--input>
			</view>
			<u-button class="button" @click="changeCurrent(current)" color="#007aff">查询</u-button>
		</view>
		<!-- 分段	 -->
		<view class="order-tabs">
			<u-subsection style="height: 74rpx;font-size: 12px;" inactiveColor="#007aff" keyName="title"
				mode="subsection" activeColor="#007aff" :list="list" :current="current"
				@change="changeCurrent"></u-subsection>
		</view>
		<view class="order-list">
			<u-list @scrolltolower="getData" refresher-background="#F2F4F6" refresher-threshold="50"
				v-if="tableData.length>0">
				<view class="list-item" v-for="(item,index) in tableData" :key="item.id">
					<view class="item-title">
						[{{item.customername}}{{item.customerphone}}] {{item.address}}
					</view>
					<view class="item-wrap">
						<view class="item-i">
							<text class="label">
								订单状态：
							</text>
							<text style="color:red">{{item.status_text }}</text>
						</view>
						<view class="item-i">
							<text class="label">
								录单时间：
							</text>
							<text class="content">{{item.create_time }}</text>
						</view>
					</view>
					<view class="item-wrap">
						<view class="item-i" style="width:100%">
							<text class="label">
								完成时间：
							</text>
							<text class="content">{{item.completion_date }}</text>
						</view>
					</view>
					<view class="item-wrap">
						<view class="item-i">
							<text class="label">
								返利类型：
							</text>
							<text class="content">{{item.rebate_type_text }}</text>
						</view>
					</view>
					<view class="item-wrap">
						<view class="item-i">
							<text class="label">
								返利状态：
							</text>
							<text class="content">{{item.rebate_status_text }}</text>
						</view>
						<view class="item-i">
							<text class="label">
								返利利润：
							</text>
							<text class="content">{{item.rebate_price }}</text>
						</view>
					</view>
					<u-button style="margin-top:8rpx;color:#007aff" @click="gotoView(item.routePath)">查看订单</u-button>
				</view>
			</u-list> <u-empty icon="http://cdn.uviewui.com/uview/empty/data.png" v-else></u-empty>
		</view>
	</view>
</template>

<script>
	import {
		getRebateOrderList
	} from '@/api'
	export default {
		data() {
			return {
				current: 1,
				// 1未录单，2已录单全部，3未完成，4已完成，5取消
				list: ['未录单', '已录单全部', '未完成', '已完成', '取消'],
				tableData: [],
				columns: [],
				params: {
					page: 1,
					limit: 20,
					status_text: '2',
					keywords: ""
				},
				nextRequest: true
			}
		},
		methods: {
			gotoView(routePath) {
				if (!routePath) return
				this.nav(routePath)
			},
			changeCurrent(current) {
				this.current = current
				this.params.status_text = ++current
				this.nextRequest=true
				this.params.page = 1
				this.tableData = []
				this.getData()
			},
			async getData() {
				let that = this
				try {
					if (!this.nextRequest) return
					let {
						code,
						data: {
							current_page: page,
							total,
							data: tableData
						},
					} = await getRebateOrderList(this.params)
					if (code === 1) {
						this.tableData = [...this.tableData, ...tableData]
						this.params.page = ++page
						this.loading = false
						this.tableData.length >= total && total > 0 ? this.nextRequest = false : null
					}
				} catch (e) {
					this.loading = false
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.order {
		&-tabs {
			background-color: #fff;
		}

		&-search {
			display: flex;

			.input {
				margin-bottom: 30rpx;
				width: 80;
			}
		}

		&-list {
			.list-item {
				font-size: 12px;
				padding: 20rpx 0;
				border-bottom: 0.5px solid #e4e4e4;

				.item {
					&-title {
						color: #3170b3;
						font-size: 16px;
						margin: 5rpx 0;
					}

					&-i {
						width: 45%;
						margin: 5rpx 0;

						&:last-child {
							width: 55%
						}
					}

					&-wrap {
						display: flex;

						.label {
							width: 144rpx
						}

						.content {
							color: #333
						}
					}
				}
			}
		}

		.time {
			display: flex;
			margin-bottom: 30rpx;

			.date {
				width: 80%;

				::v-deep.u-input {
					background-color: #fff !important;
					border: 0.5px solid #dadbde !important;
				}
			}

			.button {
				flex: 1
			}
		}
	}
</style>